<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap Demo</title>
    <link rel="stylesheet" href="./styles/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./styles/font-awesome.min.css">
    <link rel="stylesheet" href="./styles/index.css">
</head>

<body>
    <!-- 导航go -->
    <div class="all_nav navbar navbar-default navbar-fixed-top" id="navbar" role="navigation">
        <div class="container">
            <div class="col-md-2">
                <a href="javascript: void(0);">HeiKiz</a>
            </div>
            <div class="col-md-8">
                <ul class="nav_show nav navbar-nav">
                    <li>
                        <a class="nav_choose" href="javascript: void(0);">首页</a>
                    </li>
                    <li>
                        <a href="./servar_aboutServer.html">服务商管理</a>
                    </li>
                    <li>
                        <a href="./institution_aboutInstitution.html">机构管理</a>
                    </li>
                    <li>
                        <a href="./teacher_teacherIndex.html">师训管理</a>
                    </li>
                    <li>
                        <a href="./order_orderManagement.html">订单管理</a>
                    </li>
                    <li>
                        <a href="./data_statisticalData.html">数据统计</a>
                    </li>
                </ul>
            </div>
            <div class="use_info col-md-2">
                <a href="javascript: void(0);" id="dropdownMenu1" data-toggle="dropdown">
                    <img class="user_img" src="./images/timg.jpg">
                    <p class="user_name">开心麻花</p>
                    <span class="caret"></span>
                </a>
                <ul id="dropdown_menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation">
                        <a id="id1" role="menuitem" tabindex="-1" href="javascript: void(0);">保存密码</a>
                    </li>
                    <li role="presentation">
                        <a id="id2" role="menuitem" tabindex="-1" href="javascript: void(0);">退出账号</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航 end -->

    <!-- 数据概览 -->
    <div class="list_main container">
        <div class="list_main_title clearfix">
            <h1 class="list_title pull-left">数据概览</h1>
            <div class="pull-right clearfix">
                <div class="about_time pull-left">
                    <!-- 能用的到的时间 -->
                    <div class="time_group input-append date form-group pull-left" id="start_time" data-date="2012-12" data-date-format="dd-mm-yyyy">
                        <input size="16" type="text" class="form-control" value="2012-12" readonly>
                        <span class="time_icon add-on">
                            <i class="icon-sort"></i>
                        </span>
                    </div>
                    <span class="time_heng pull-left">-</span>
                    <!-- 能用的到的时间 -->
                    <div class="time_group input-append date form-group pull-left" id="end_time" data-date="2012-12" data-date-format="dd-mm-yyyy">
                        <input size="16" type="text" class="form-control" value="2012-12" readonly>
                        <span class="time_icon add-on">
                            <i class="icon-sort"></i>
                        </span>
                    </div>
                </div>
                <div class="choose_time pull-left clearfix">
                    <p class="pull-left">最近：</p>
                    <div class="time_list time_choose pull-left">1个月</div>
                    <div class="time_list pull-left">3个月</div>
                    <div class="time_list pull-left">全部</div>
                </div>
            </div>
        </div>
        <div class="show_all">
            <div class="list_one row clearfix">
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_addServer"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">新增服务商</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_addMechanism"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">新增机构</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_addTeacherNum"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">新增老师数</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_addStudentNum"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">新增学生数</p>
                    </div>
                </div>
            </div>
            <div class="list_one row clearfix">
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_sign"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">签约费用</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_purchaseAmount"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">进货金额</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_serverBonus"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">服务商签约奖金</p>
                    </div>
                </div>
                <div class="list_wrap pull-left">
                    <div class="list_bg bg_serverCommission"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">服务商进货提成</p>
                    </div>
                </div>
            </div>
            <div class="list_two_wrap row clearfix">
                <div class="list_two pull-left">
                    <div class="list_bg bg_larg_left"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">总收入</p>
                    </div>
                </div>
                <div class="list_two pull-left">
                    <div class="list_bg bg_larg_right"></div>
                    <div class="list_txt">
                        <p class="text_title">324</p>
                        <p class="text_centent">利润</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 未发货订单 -->
    <div class="no_shipped_wrap container">
        <div class="row">
            <h1>未发货订单</h1>
        <!-- table 部分 -->
        <div class="table_body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th class="col-md-1">订单名称</th>
                        <th class="col-md-1">数量</th>
                        <th class="col-md-2">金额</th>
                        <th class="col-md-2">机构名称</th>
                        <th class="col-md-2">服务商名称</th>
                        <th class="col-md-2">订单状态</th>
                        <th class="col-md-2">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>学生教材</td>
                        <td>220</td>
                        <td>￥15000</td>
                        <td>春天里幼儿园</td>
                        <td>HeiPis</td>
                        <td>未发货</td>                        
                        <td class="table_operation">
                            <a href="javascript: void(0);">查看详情</a>
                            <a href="javascript: void(0);">确认发货</a>
                        </td>
                    </tr>
                    <tr>
                        <td>学生教材</td>
                        <td>220</td>
                        <td>￥15000</td>
                        <td>春天里幼儿园</td>
                        <td>HeiPis</td>
                        <td>未发货</td>
                        <td class="table_operation">
                            <a href="javascript: void(0);">查看详情</a>
                            <a href="javascript: void(0);">确认发货</a>
                        </td>
                    </tr>
                    <tr>
                        <td>学生教材</td>
                        <td>220</td>
                        <td>￥15000</td>
                        <td>春天里幼儿园</td>
                        <td>HeiPis</td>
                        <td>未发货</td>
                        <td class="table_operation">
                            <a href="javascript: void(0);">查看详情</a>
                            <a href="javascript: void(0);">确认发货</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
    </div>

    <!-- 待确认机构 -->
    <div class="no_shipped_wrap container">
        <div class="row">
            <h1>待确认机构</h1>
            <!-- table 部分 -->
            <div class="table_body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="col-md-2">订单名称</th> 
                            <th class="col-md-2">所属服务商</th>
                            <th class="col-md-6">签约方案</th>
                            <th class="col-md-2">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>学生教材</td>
                            <td>HeiPis</td>
                            <td>单店方案</td>
                            <td class="table_operation">
                                <a href="javascript: void(0);">查看详情</a>
                                <a href="javascript: void(0);">确认发货</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <script src="./javascripts/jquery-1.9.1.min.js"></script>
    <script src="./javascripts/bootstrap.min.js"></script>
    <script src="./javascripts/bootstrap-datetimepicker.min.js"></script>
    <script src="./javascripts/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {
            // 导航选项 点击
            $(".nav_show>li a").click(function () {
                console.log($(this).index());
                $(this).addClass('nav_choose')
                .parent("li").siblings().find("a")
                .removeClass('nav_choose');
            })
            // try
            $("#id1").click(function(){
                console.log("id1---")
            })
            $("#id2").click(function () {
                console.log("id1--111-")
            })

            // 开始时间
            $('#start_time').datetimepicker({
                // 选中月份
                format: 'yyyy-mm',
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                language: 'zh-CN'
            });
            // 结束时间
            $('#end_time').datetimepicker({
                // 选中月份
                format: 'yyyy-mm',
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                language: 'zh-CN'
            });
            // 时间选择
            $("div.time_list").click(function(){
              $(this).addClass('time_choose').siblings().removeClass('time_choose');
            })


        })
    </script>
</body>

</html>